<template>
    <div class="scan-page">
        <!-- 入库单信息 -->
        <div class="page-card">
            <div class="page-title">
                <div class="title-content">
                    <span>入库单信息</span>
                    <!-- <image src="../../static/icons/print.png" class="print-icon" /> -->
                </div>
            </div>

            <!-- 信息项 -->
            <div class="info-list">
                <div class="list-item">
                    <div class="item-title">入库单号</div>
                    <div class="item-content">{{ detailInfo.receiptOrderNum }}</div>
                </div>

                <div class="list-item">
                    <div class="item-title">产品类型</div>
                    <div class="item-content">{{ detailInfo.productType }}</div>
                </div>

                <div class="list-item">
                    <div class="item-title">产品代码</div>
                    <div class="item-content">015{{ detailInfo.productCode }}</div>
                </div>

                <div class="list-item">
                    <div class="item-title">入库箱数</div>
                    <div class="item-content">
                        {{ detailInfo.boxesNum || detailInfo.scanRecordList?.length }}
                    </div>
                </div>

                <div class="list-item">
                    <div class="item-title">轮胎数量</div>
                    <div class="item-content">{{ detailInfo.tiresNum }}</div>
                </div>

                <div class="list-item">
                    <div class="item-title">入库员工</div>
                    <div class="item-content">{{ detailInfo.employeeNum }}</div>
                </div>
            </div>
        </div>

        <!-- 投喂记录 -->
        <uni-collapse class="my-3" v-if="feedList && feedList.length">
            <uni-collapse-item title-border="none" :border="false" v-for="(record, v) in feedList" :key="v">
                <template v-slot:title>
                    <div class="page-title collapse-title">
                        <div class="scan-title">
                            <span>投喂记录</span>
                            <span class="font-medium ml-2">{{ record.employeeNum }}</span>
                        </div>
                    </div>
                </template>
                <div class="collapse-content">
                    <div class="number-box">
                        <div class="number-item">
                            <div class="text-warning item-value">{{ getTiresNum(record.scanList) }}</div>
                            <div class="item-text">已扫胎数</div>
                        </div>

                        <div class="number-item">
                            <div class="text-success item-value">{{ record.scanList?.length || 0 }}</div>
                            <div class="item-text">正确数量</div>
                        </div>

                        <div class="number-item">
                            <div class="text-danger item-value">0</div>
                            <div class="item-text">错误数量</div>
                        </div>
                    </div>

                    <div class="scan-list">
                        <div class="page-card" v-for="(scan, index) in record.scanList" :key="index">
                            <div class="scan-content">
                                <uni-icons
                                    :type="scan.type === 'error' ? 'clear' : 'checkbox-filled'"
                                    :color="scan.type === 'error' ? '#D81E06' : '#52C41B'"
                                    size="28"
                                />
                                <div
                                    class="center-content"
                                    :class="scan.type === 'error' ? 'text-danger' : ''"
                                >
                                    {{ formatScan(scan.code) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </uni-collapse-item>
        </uni-collapse>

        <!-- 扫码校验 -->
        <uni-collapse class="my-3" v-if="recordList && recordList.length">
            <uni-collapse-item title-border="none" :border="false" v-for="(record, v) in recordList" :key="v">
                <template v-slot:title>
                    <div class="page-title collapse-title">
                        <div class="scan-title">
                            <span>扫码校验</span>
                            <span class="font-medium ml-2">{{ record.employeeNum }}</span>
                        </div>
                    </div>
                </template>
                <div class="collapse-content">
                    <div class="number-box">
                        <div class="number-item">
                            <div class="text-warning item-value">{{ getTiresNum(record.scanList) }}</div>
                            <div class="item-text">已扫胎数</div>
                        </div>

                        <div class="number-item">
                            <div class="text-success item-value">{{ record.scanList?.length || 0 }}</div>
                            <div class="item-text">正确数量</div>
                        </div>

                        <div class="number-item">
                            <div class="text-danger item-value">0</div>
                            <div class="item-text">错误数量</div>
                        </div>
                    </div>

                    <div class="scan-list">
                        <div class="page-card" v-for="(scan, index) in record.scanList" :key="index">
                            <div class="scan-content">
                                <uni-icons
                                    :type="scan.type === 'error' ? 'clear' : 'checkbox-filled'"
                                    :color="scan.type === 'error' ? '#D81E06' : '#52C41B'"
                                    size="28"
                                />
                                <div
                                    class="center-content"
                                    :class="scan.type === 'error' ? 'text-danger' : ''"
                                >
                                    {{ formatScan(scan.code) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </uni-collapse-item>
        </uni-collapse>

        <!-- 关联SAP -->
        <div class="page-card my-3" id="SAP_Box">
            <div class="page-title">SAP关联信息</div>

            <div class="link-box">
                <div class="link-title">入库单号</div>
                <uni-easyinput
                    v-model="sapOrderNum"
                    type="text"
                    placeholder="请输入入库单号"
                    class="link-input"
                    :inputBorder="false"
                />
            </div>
        </div>

        <!-- 下方固定的提交栏 -->
        <div class="btn-box">
            <div class="cancel-box" @click="goBack()">取 消</div>
            <div class="submit-box" @click="doSubmit">提 交</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { goBack, formatScan, getTiresNum } from '@/utils/publicFuc'
    import { bindSAP, detail } from '@/api/pda'

    const detailInfo = ref<AnyObject>({})
    const pageCode = ref('')
    const pageId = ref('')
    onLoad((option: any) => {
        const { id } = option
        if (id) pageCode.value = id
        loadData(pageCode.value)
    })

    onShow(() => {
        setTimeout(() => {
            uni.pageScrollTo({
                selector: '#SAP_Box',
                duration: 200,
            })
        }, 500)
    })
    const recordList = ref<AnyObject[]>([])
    const feedList = ref<AnyObject[]>([])
    const loadData = (id: string) => {
        detail(id).then((res: any) => {
            detailInfo.value = res.data
            // 下面要处理scanlist
            const { scanRecordList, id } = res.data
            pageId.value = id
            // 校验扫码
            scanRecordList
                .filter((el: { scanType: string }) => el.scanType === '0')
                .forEach((record: AnyObject) => {
                    const key = record.createUser
                    const index = recordList.value.findIndex(item => item.employeeNum === key)
                    // 没有时创建元素
                    if (index < 0) {
                        recordList.value.push({
                            employeeNum: record.createUser,
                            scanList: [{ code: record.barCode, type: 'success' }],
                        })
                    } else {
                        recordList.value[index].scanList.push({ code: record.barCode, type: 'success' })
                    }
                })

            //投喂
            scanRecordList
                .filter((el: { scanType: string }) => el.scanType === '1')
                .forEach((record: AnyObject) => {
                    const key = record.createUser
                    const index = feedList.value.findIndex(item => item.employeeNum === key)
                    // 没有时创建元素
                    if (index < 0) {
                        feedList.value.push({
                            employeeNum: record.createUser,
                            scanList: [{ code: record.barCode, type: 'success' }],
                        })
                    } else {
                        feedList.value[index].scanList.push({ code: record.barCode, type: 'success' })
                    }
                })
        })
    }

    const sapOrderNum = ref('')
    const doSubmit = () => {
        if (!sapOrderNum.value)
            return uni.showToast({ title: '请输入SAP单号', icon: 'error', duration: 3000 })
        const params = {
            id: pageId.value,
            sapOrderNum: sapOrderNum.value,
        }
        bindSAP(params).then(res => {
            uni.showToast({ title: '绑定SAP成功', icon: 'success', duration: 3000 })
            setTimeout(() => {
                goBack()
            }, 3000)
        })
    }
</script>

<style lang="scss" scoped>
    .scan-page {
        @apply min-h-screen bg-pagebg p-4 pb-20 box-border;
        .title-content {
            @apply flex justify-between items-center flex-1;
            .print-icon {
                @apply w-4 h-4;
            }
        }
        .info-list {
            .list-item {
                @apply flex py-4 justify-between;
                &:not(:last-of-type) {
                    @apply border-b border-line border-solid border-0;
                }

                .item-content {
                    @apply flex-1 text-right text-grayText ml-4 break-all;
                }
            }
        }

        :deep(.uni-collapse) {
            @apply bg-transparent;
            .uni-collapse-item {
                @apply my-3 bg-white rounded-lg overflow-hidden  #{!important};
            }

            .collapse-title {
                @apply p-4 pb-0;
            }
            .collapse-content {
                @apply bg-pagebg;
            }
        }
        .number-box {
            @apply flex justify-evenly pb-4 bg-white rounded-b-lg;
            .number-item {
                @apply flex flex-col items-center;
                .item-value {
                    @apply font-bold text-xl mb-2;
                }
            }
        }
        .scan-list {
            .page-card {
                @apply my-3 px-2;
                .scan-content {
                    @apply flex justify-between items-center;
                }
                .center-content {
                    @apply flex-1 mx-4 break-all;
                }
            }
        }

        .btn-box {
            box-shadow: 0 -1px 0 1px #ededed;
            @apply fixed left-0 bottom-0 flex justify-between items-center p-4 bg-white
                w-screen box-border;
            .cancel-box {
                @apply py-3 rounded text-grayText border border-solid border-grayText flex-1 text-center;
            }
            .submit-box {
                @apply py-3 rounded text-white bg-primary flex-1 text-center ml-4;
            }
        }

        .link-box {
            @apply flex justify-between items-center border-b border-line border-solid border-0;
            :deep(.link-input) {
                @apply ml-2 text-right;
            }
        }
    }
</style>
